<template>
    <div style="display: flex">
        <el-input v-model="search" placeholder="请输入反馈内容"
                  style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
        <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
        </el-button>
    </div>

    <el-table :data="tableData" :row-style="{ height: '77px' }" border
              style="width: calc(100vw - 240px);height: 75vh;margin-top: 20px;font-size: 15px;">
        <el-table-column align="center" prop="stuname" label="反馈学员" width="150"/>
        <el-table-column align="center" prop="periodFeedback" label="反馈内容" width="auto" show-overflow-tooltip="true"/>
        <el-table-column align="center" prop="createTime" label="创建日期" width="200"/>
    </el-table>
    <!--      分页-->
    <div style="margin-top: 10px">
        <el-pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>
    import {ref} from 'vue'
    import request from "~/utils/request.js";

    export default {
        data() {
            return {
                tableData: [],
                search: "",
                courseId: '',
                currentPage: 1,
                pageSize: 10,
                total: 0,
            }
        },
        created() {
            this.load()
        },
        methods: {
            load() {
                if(this.$route.query.courseId === undefined) {
                    this.courseId = ''
                } else {
                    this.courseId = Number(this.$route.query.courseId)
                }
                if (this.courseId === undefined) {
                    this.courseId = ''
                }
                request.get("/stu-feedback/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&name=" + this.search + "&courseId=" + this.courseId).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "records") {
                                this.tableData = res.data[key];
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        ElMessage.error("错误" + res.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
